<template>
  <t-tabs v-model="value">
    <t-tab-panel :value="1" label="选项卡1">
      <t-button @click="dialog.visible = true">Open Modal</t-button>
    </t-tab-panel>
    <t-tab-panel :value="2" label="选项卡2">
      <p style="margin: 20px">选项卡2内容区</p>
    </t-tab-panel>
    <t-tab-panel :value="3" label="选项卡3">
      <p style="margin: 20px">选项卡3内容区</p>
    </t-tab-panel>
  </t-tabs>

  <t-dialog v-model:visible="dialog.visible" v-model:header="dialog.title" footer draggable>
    <p>This is a dialog</p>
  </t-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'

const value = ref(1)
const dialog = reactive({
  visible: false,
  title: 'title',
})
</script>

<style lang="scss" scoped></style>
